<template>
  <div>
    <a-page>
      <!-- Table header row -->
      <a-row type="flex" justify="space-between" align="middle" style="font-weight: bold; margin-bottom: 20px;">
        <a-col :span="3">订单Id</a-col>
        <a-col :span="2">订单地址</a-col>
        <a-col :span="2">订单用户</a-col>
        <a-col :span="2">订单手机号</a-col>
        <a-col :span="5">订单包含</a-col>
        <a-col :span="2">订单金额</a-col>
        <a-col :span="2">订单数量</a-col>
        <a-col :span="2">订单开始时间</a-col>
        <a-col :span="2">订单是否送达</a-col>
        <a-col :span="2">订单状态</a-col>
      </a-row>

      <!-- Table body rows (data) -->
      <div v-if="food.length !== 0" v-for="(item, index) in food" :key="index" :class="{'odd-row': index % 2 === 1}">
        <a-row type="flex" justify="space-between" align="middle" class="table-row" style="margin-bottom: 10px;">
          <a-col :span="3" style="font-size: 10px">{{ item.orderId }}</a-col>
          <a-col :span="2">{{ item.userRemark }}</a-col>
          <a-col :span="2">{{ item.userName }}</a-col>
          <a-col :span="2">{{ item.userNumber }}</a-col>

          <!-- Display the details of cao inside this column -->
          <a-col :span="5">
            <div v-for="(items, indexs) in item.cao" :key="indexs" class="combo-details">
              <!-- Display comboName and image side by side -->
              <p style="margin: 0; font-weight: bold;">订单{{indexs}}: {{ items.comboName }}</p>
              <img :src="items.comboImg" alt="套餐图片" class="combo-image" />
            </div>
          </a-col>

          <a-col :span="2">{{ item.money }}</a-col>
          <a-col :span="2">{{ item.num }}</a-col>
          <a-col :span="2">{{ item.createTime }}</a-col>
          <a-col :span="2">{{ item.isGet }}</a-col>
          <a-col :span="2">{{ item.isOrders }}</a-col>
        </a-row>
      </div>

      <div v-else>
        <a-result
            status="success"
            title="还没有未上架的商品"
            sub-title="你好，亲爱的至减管理员"
        />
      </div>
    </a-page>

    <!-- Pagination -->
    <a-pagination
        v-model:current="current1"
        show-quick-jumper
        :total="total"
        @change="onChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import myaxios from "../../Axios/myaxios";

const current1 = ref<number>(1);
const food = ref<any[]>([]);
const total = ref<number>(0);

const fetchData = async (page: number) => {
  try {
    const response = await myaxios.get('/rider/riderSelectAllWaitOrders', {
      params: {
        page: page,
        size: 10 // Number of items per page
      }
    });
    console.log(response.data);

    food.value = response.data.map((item: any) => ({
      orderId: item.orderId,
      num: item.num,
      userName: item.userName,
      money: item.money,
      createTime: item.createTime,
      userRemark: item.userRemark,
      userNumber: item.userNumber,
      isOrders: item.isOrders,
      cao: item.cao,
      isGet: item.isGet
    }));
    console.log(food.value, "你好");
    total.value = response.data.total; // Update total items count for pagination
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
};

onMounted(() => {
  fetchData(current1.value);
});

const onChange = (pageNumber: number) => {
  current1.value = pageNumber;
  fetchData(pageNumber);
};
</script>

<style scoped>
/* Apply border and padding to alternating rows */
.odd-row {
  /*border-bottom: 1px solid black;*/
  padding-bottom: 10px;
}

/* Styling for each table row */
.table-row {
  padding: 10px 0;
  border-bottom: 2px solid white;
}

/* Ensure the combo details have proper alignment */
.combo-details {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Image styling */
.combo-image {
  max-width: 50px;
  height: auto;
}
</style>
